<template> 
	<div class="container">
   <Header  />
   <Search :cities="cities" />
   <List 
   :cities="cities" 
   :hotCities="hotCities"
   :letter="letter"
   />
   <Alphabet 
   :cities="cities" 
   @change="handleLetterChange"
   />
	</div>
</template> 

<script>
import Header from './components/Header'
import Search from './components/Search'
import List from './components/List'
import Alphabet from './components/Alphabet'
 import axios from 'axios'

export default { 
  data () { 
    return { 
      cities:{},
      hotCities:[],
      letter:""
    }; 
  }, 
  components:{
    Header,
    Search,
    List,
    Alphabet
  },

  methods: { 
    getCityInfo(){
      axios.get('/api/city.json')
        .then(this.handleGetCityInfo)
    },
    handleGetCityInfo(res){
      let data=res.data;
      if(data.ret && data.data){
        this.cities=res.data.data.cities;
        this.hotCities=res.data.data.hotCities;
      }
    },
    handleLetterChange(letter){
      this.letter=letter
    }

  },
  mounted(){
    this.getCityInfo()
  }


}; 
</script> 

<style scoped> 

</style> 